<template>
  <u-popup :show="show" @close="close" @open="open" :closeable="closeable">
    <view class="title" v-if="title">{{ title }}</view>
    <view
      class="layout"
      style="width: 100vw; background-color: #f7f8fa; font-size: 14px"
      :style="{ height: `${height}vh` }"
    >
      <slot />
    </view>
  </u-popup>
</template>
<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    closeable: {
      type: Boolean,
      default: true,
    },
    title: {
      default: "",
      type: String,
    },
    height: {
      default: 90,
      type: Number,
    },
  },
  data: function () {
    return {};
  },
  methods: {
    open() {
      this.$emit("open");
    },
    close() {
      this.$emit("close");
    },
  },
};
</script>
<style lang="scss" scoped>
.title {
  line-height: 90rpx;
  background-color: #fff;
  text-align: center;
  color: #909399;
}
</style>
